<style lang="scss">
.activity {
  width: 100%;
  height: 14vh;
  display: flex;
  padding: .1rem;

  div {
    padding: .1rem;
  }

  img {
    width: 100%;
  }
}

.ShopList {
  width: 100%;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  -moz-column-gap: 2rem;
  -webkit-column-gap: 2rem;
  column-gap: 1rem;
  margin: 0 auto;
  padding: .4rem;
  background-color: #f2f2f2;
  overflow: auto;

  div {
    width: 100%;
    padding-bottom: 0.1em;
    margin-bottom: .5rem;
    -moz-page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    background: #fff;
    border-radius: 5%;
    padding: .4rem;

    // margin-top: .5rem;
    img {
      width: 100%;
    }

    p {
      font-size: .8rem;
      color: #626262;
      margin-top: .3rem;

      button {
        height: 1rem;
        line-height: 1rem;
        background-color: #4dd676;
        border: none;
        // padding: 0 .2rem;
        color: #fff;
        border-radius: 15%;
        margin-right: .2rem
      }
    }
  }
}
</style>
<template>
  <div class="activity">
    <div v-for="(item, index) in acList" :key="index">
      <img :src="item.img_url" alt="" @click="toAcList(item)">
    </div>
  </div>
  <van-pull-refresh v-model="alloading" @refresh="onRefresh">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="ShopList">
        <div v-for="(item, index) in ShopList" :key="index" @click="cartdetail(item)">
          <img :src="item.image" alt="">
          <p><button>{{ item.tag }}</button>{{ item.title }}</p>
          <p style="color:#c2c2c2;font-size: .7rem;">{{ item.subtitle }}</p>
          <p style="color: red;">￥{{ item.price }}</p>
        </div>
      </div>
    </van-list>
  </van-pull-refresh>

  <div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import axios from 'axios'
import { showToast } from 'vant';
import { useRouter } from 'vue-router';
const page = ref<number>(1);
const pageSize = ref<number>(10);
const alloading = ref(false);
const finished = ref(false);
const loading = ref(false);
const router = useRouter()
// 上拉下拉
const count = ref(0);
const onRefresh = () => {
  setTimeout(() => {
    showToast('刷新成功');
    page.value = 1
    alloading.value = false;
    shopList()
  }, 1000);
};
const onLoad = () => {
  page.value++
  shopList()
  setTimeout(() => {
    // 加载状态结束
    loading.value = false;
    // 数据全部加载完成
    if (ShopList.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};


// 活动限时秒杀
const acList = ref<any>([])
// 商品数据
const ShopList = ref<any>([])
const activityList = async () => {
  var res = await axios.get('/static/mall/home/recommend_small_card/')
  // console.log(res.data.data.recommend_small_cards);
  acList.value = res.data.data.recommend_small_cards
}
activityList()
const toAcList = (item: any) => {
  window.location.href = item.jump_url
}
const shopList = async () => {
  const res = await axios.get('/static/mall/home/shop_spu/content_config/',
    {
      params: {
        cursor: page.value,
        page_size: pageSize.value
      }
    }
  )
  ShopList.value = [...ShopList.value, ...res.data.data.content_list]
  // console.log(ShopList.value);
}
shopList()
const cartdetail = (item: any) => {
  router.push({
    path: '/cartdetail',
    query: item
  })
}

</script>
